.tab-nav {
    list-style: none;
    padding: 0;
    white-space: nowrap;
    margin: 0 0 10px 0;
    overflow: auto;
    box-shadow: inset 0 -2px 0 0 #eee;

    & > li {
        display: inline-block;
        vertical-align: top;

        & > a {
            display: inline-block;
            color: #7a7a7a;
            text-transform: uppercase;
            position: relative;
            width: 100%;
            font-weight: 500;

            &:after {
                content: "";
                height: 2px;
                position: absolute;
                width: 100%;
                left: 0;
                bottom: 0;
                display: none;
            }

            @media (min-width: @screen-sm-min) {
                padding: 15px;
            }

            @media (max-width: @screen-sm-min) {
                padding: 15px 8px;
            }
        }

        &.active {
            & > a {
                color: #000;

                &:after {
                    display: block;
                }
            }
        }
    }

    &.tab-nav-right {
        text-align: right;
    }

    &.tn-justified {
        & > li {
            display: table-cell;
            width: 1%;
            text-align: center;
        }
    }

    &.tn-icon {
        & > li {
            .zmdi {
                font-size: 22px;
                line-height: 100%;
                min-height: 25px;
            }
        }
    }

    &:not([data-tab-color]) {
        & > li > a:after {
            background: @blue;
        }
    }

    &[data-tab-color="green"] {
        & > li > a:after {
            background: @green;
        }
    }

    &[data-tab-color="red"] {
        & > li > a:after {
            background: @red;
        }
    }

    &[data-tab-color="teal"] {
        & > li > a:after {
            background: @teal;
        }
    }

    &[data-tab-color="amber"] {
        & > li > a:after {
            background: @amber;
        }
    }

    &[data-tab-color="black"] {
        & > li > a:after {
            background: @black;
        }
    }

    &[data-tab-color="cyan"] {
        & > li > a:after {
            background: @cyan;
        }
    }
}

.tab-content {
    padding: 20px 0;
}

.rd-tab {
  .remove {
    cursor: pointer;
    color: #A09797;
    padding: 0 3px 1px 4px;
    font-size: 11px;
    &:hover {
      color: white;
      background-color: #FF8080;
      border-radius: 50%;
    }
  }
}

.tab-nav {
  > li.rd-tab-btn {
    float: right;
    padding-right: 10px;
    padding-top: 10px;
  }
}
